<template>
  <div>
    <!-- 年历标题和年份选择器 -->
    <div>
      <h2>
        <el-date-picker
          v-model="selectedDate"
          type="year"
          style="cursor: pointer;"
          @change="updateYear(selectedDate.getFullYear())"
          clearable:false
        ></el-date-picker>
        年日历
      </h2>
    </div>

    <div style="float: right; display: inline">
      <el-button v-if="editBoolean" @click="editMode = !editMode">
        {{ editMode ? '保存' : '修改' }}
      </el-button>

      <!--      <el-button @click="exportCalendar" style="margin-left: 20px;">-->
      <!--        导出-->
      <!--      </el-button>-->
    </div>
    <!-- 导出按钮 -->
    <div style="margin-top: 40px">
      <!-- 按月份分列展示的日历 -->
      <el-row gutter="20" style=" margin-top: 100px;height: 80%; width: 100%">
        <el-col v-for="month in months" :key="month" :span="8" >
          <el-card class="month-card">
            <div slot="header">
              <!-- 当前月份标题 -->
              <h3>{{ month }} 月</h3>
            </div>
            <!-- 日历表格 -->
            <table class="calendar-table">
              <thead>
              <tr>
                <!-- 星期表头 -->
                <th v-for="day in weekdays" :key="day">{{ day }}</th>
              </tr>
              </thead>
              <tbody>
              <!-- 遍历每周安排，显示日期按钮 -->
              <tr v-for="week in getWeeks(month)" :key="week">
                <td v-for="day in week" :key="day" class="calendar-cell">
                  <!-- 仅当日期存在时显示按钮 -->
                  <el-button
                    v-if="day"
                    :type="isSpecialDate(month, day) ? 'success' : 'default'"
                    @click="toggleSpecialDate(month, day)"
                    class="day-button"
                    :disabled="!isEditable && isHistoricalDate(month, day)"
                  >
                    {{ day }}
                  </el-button>
                </td>
              </tr>
              </tbody>
            </table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { listSh , updateSh } from '@/api/operate/sh'
export default {
  data() {
    return {
      editMode: false, // 编辑模式开关
      specialDates: {}, // 特殊日期存储
      months: Array.from({ length: 12 }, (_, i) => i + 1), // 生成月份数组
      weekdays: ['一', '二', '三', '四', '五', '六', '日'], // 星期数组
      currentYear: new Date().getFullYear(), // 当前年份
      selectedDate: new Date(), // 默认当前日期
      editBoolean: true,
      specialDateData:[],
      specialSh:{},
      historySpecialDate: [] // 历史特殊日期
    };
  },
  computed: {
    currentYear() {
      return this.selectedDate.getFullYear();
    },
  },
  methods: {
    isEditable() {
      return this.currentYear >= new Date().getFullYear();
    },
    // 检查特定日期是否为特殊日期
    isSpecialDate(month, day) {
      return this.specialDates[`${month}-${day}`];
    },
    // 切换特定日期的特殊状态
    toggleSpecialDate(month, day) {
      if (this.editMode) {
        const key = `${month}-${day}`;
        if (this.specialDates[key]) {
          this.$delete(this.specialDates, key); // 删除特殊日期
        } else {
          this.$set(this.specialDates, key, true); // 添加特殊日期
        }
        this.getFormattedSpecialDates(); // 格式化特殊日期并返回
      }
    },
    // 导出日历逻辑
    exportCalendar() {
      // 导出逻辑实现
    },
    // 获取指定月的天数
    getDaysInMonth(month) {
      return new Date(this.currentYear, month, 0).getDate();
    },
    // 获取指定月的空白天数（前置空格）
    getEmptyDaysCount(month) {
      const firstDayOfMonth = new Date(this.currentYear, month - 1, 1).getDay();
      return firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;
    },
    // 获取一个月的所有周
    getWeeks(month) {
      const daysInMonth = this.getDaysInMonth(month);
      const emptyDays = this.getEmptyDaysCount(month);
      const weeks = [];
      let week = Array(emptyDays).fill(null); // 创建一个包含空白的数组

      for (let day = 1; day <= daysInMonth; day++) {
        week.push(day);
        if (week.length === 7) {
          weeks.push(week);
          week = []; // 当一周满时，推入并重置
        }
      }
      // 处理最后一周的情况
      if (week.length > 0) {
        weeks.push(week);
      }
      return weeks; // 返回包含月份所有周的数组
    },
    // 切换年份的逻辑
    updateYear(year) {
      this.selectedDate.setFullYear(year); // 更新年份
      this.currentYear = year; // 设置当前年份
      // 重新获取特殊日期
      this.getSpecialDates();
      this.editBoolean = year >= new Date().getFullYear(); // 当前日期以前年份不可编辑
    },
    // 判断日期是否为历史日期
    isHistoricalDate(month, day) {
      const selectedDate = new Date(this.currentYear, month - 1, day);
      return selectedDate < new Date(); // 判断选择的日期是否在当前日期之前
    },
    // 将选中的日期封装成 'yyyy-MM-dd,yyyy-MM-dd……' 结构的字符串
    getFormattedSpecialDates() {
      const formattedDates = Object.keys(this.specialDates).map(key => {
        const [month, day] = key.split('-');
        const year = this.currentYear; // 使用当前年份
        const date = new Date(year, month - 1, day);
        const yyyy = date.getFullYear();
        const MM = String(date.getMonth() + 1).padStart(2, '0');
        const dd = String(date.getDate()).padStart(2, '0');
        return `${yyyy}-${MM}-${dd}`;
      });

      // 输出格式化后的字符串，历史特殊日期放在前面
      const allSpecialDates = [...this.historySpecialDate, ...formattedDates].join(',');
      console.log(allSpecialDates);
      this.specialSh.specialDate = allSpecialDates; // 更新特殊日期
      this.updateSh(this.specialSh); // 保存更新
      return allSpecialDates; // 返回合并后的日期字符串
    },
    // 获取数据库中已有的特殊日期
    getSpecialDates() {
      listSh().then(response => {
        this.specialSh = response.data;
        this.specialDateData = this.specialSh.specialDate.split(',');

        // 重置 specialDates 和 historySpecialDate
        this.specialDates = {};
        this.historySpecialDate = [];

        // 将特殊日期存入 specialDates，检查年份
        this.specialDateData.forEach(date => {
          const [year, month, day] = date.split('-');
          if (parseInt(year, 10) === this.currentYear) {
            const monthDayKey = `${parseInt(month, 10)}-${parseInt(day, 10)}`;
            this.$set(this.specialDates, monthDayKey, true);
          } else {
            // 如果是历史日期，存入 historySpecialDate
            this.historySpecialDate.push(date);
          }
        });

        console.log(this.specialDates); // 输出 specialDates 检查格式
      });
    },
    updateSh(newSpecialDate){
      updateSh(newSpecialDate).then(response => {
        this.$message.success('修改成功')
        this.getSpecialDates()
      })
    }
  },
  created(){
    this.getSpecialDates();

  }
};
</script>

<style scoped>
.calendar-table {
  width: 100%; /* 设置日历表格宽度为100% */
  border-collapse: collapse; /* 合并表格边框 */
}

.calendar-table th,
.calendar-table td {
  text-align: center; /* 设置文本对齐为中心 */
  padding: 5px; /* 设置单元格内边距 */
}

.day-button {
  width: 100%; /* 设置按钮宽度为100% */
}

.month-card {
  height: 330px;
  width: 98%;
  min-height: 400px; /* 设置统一的卡片高度 */
  margin: 20px; /* 设置底部间距 */
}

.el-card {
  margin-bottom: 20px; /* 设置卡片底部间距 */
}

h2 {
  cursor: pointer; /* 鼠标悬浮时指针样式 */
}
</style>
